<template>
  <div class="faultViewContainer" v-show="this.isViewVisible">
    <div
      class="faultViewAlertContainer"
      :style="getBgStyle"
      @click="gotoFaultPage"
    >
      <img class="faultAlertLeft" :src="getFaultTipImg" />
      <div class="faultAlertText" :style="getTitleStyle">
        {{ this.getFaultMessage }}
      </div>
      <img
        class="faultAlertRight"
        :src="getFaultTipArrow"
        v-show="this.clickable"
      />
    </div>
  </div>
</template>
<script>
import {
  WIDTH_PHONE,
  PHONE_RATIO,
  WIDTH_SPREADED,
  SPREADED_RATIO,
  WIDTH_PAD_PORTRAIT,
  PAD_PORTRAIT_RATIO,
  WIDTH_PAD_LANDSCAPE,
  PAD_LANDSCAPE_RATIO,
  WIDTH_STANDARD,
  SPREADED_SCREEN_RATIO,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenDpr,
  screenType,
  screenDescription,
  isIOS,
  isSpreadOn,
  screenSize,
  getSecondPageMarginStyle,
  getSecondPageStyle,
  getDialogFlexAlign,
  getDialogStyle,
  getSingleButtonStyle,
  setScreenResizeListener,
  itemWidth,
} from "../../assets/js/flexible.js";
import FirstPageMargin from "./frame/first/FirstPageMargin.vue";
export default {
  name: "FaultView",
  components: {
    FirstPageMargin,
  },
  props: {
    faultListPro: {
      type: 0,
      faultCode: 0,
      warnCode: 0,
      faults: { 0: { title: "", reason: "", solution: [] } },
      warns: { 0: { title: "", reason: "", solution: [] } },
    },
    darkModePro: {
      type: String,
      default: "light",
    },
    deviceTypePro: {
      type: Number,
      default: 1,
    },
    clickablePro: {
      type: Boolean,
      default: true,
    },
    styleTypePro: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      faultList: {
        type: 0,
        faultCode: 0,
        warnCode: 0,
        faults: { 0: { title: "", reason: "", solution: [] } },
        warns: { 0: { title: "", reason: "", solution: [] } },
      },
      darkMode: "light",
      deviceType: 1,
      alertMessage: this.$i18n.t("fault.deviceFault"),
      helpMessage: ", " + this.$i18n.t("fault.pleaseSeeHelp"),
      clickable: true,
      styleType: 0,
    };
  },
  mounted() {
    this.faultList = this.faultListPro;
    this.darkMode = this.darkModePro;
    this.deviceType = screenType;
    this.alertMessage = this.$i18n.t("fault.deviceFault");
    this.helpMessage = ", " + this.$i18n.t("fault.pleaseSeeHelp");
    this.clickable = this.clickablePro;
    this.styleType = this.styleTypePro;
  },
  watch: {
    faultListPro(newVal) {
      this.faultList = newVal;
    },
    darkModePro(newVal) {
      this.darkMode = newVal;
    },
    deviceTypePro(newVal) {
      this.deviceType = newVal;
    },
    clickablePro(newVal) {
      this.clickable = newVal;
    },
    styleTypePro(newVal) {
      this.styleType = newVal;
    },
  },
  computed: {
    getTitleStyle() {
      var color;
      switch (this.styleType) {
        case 0:
          color = "var(--current-fault-title-color)";
          break;
        case 1:
          color = "var(--current-warn-title-color)";
          break;
      }
      return { color: color };
    },
    getBgStyle() {
      var width = flexibleWidth - screenSize(12.0) * 2;
      switch (this.deviceType) {
        case 101: //iPhone
          width = flexibleWidth - screenSize(12.0) * 2;
          break;
        case 102: //iPad
          width = flexibleWidth - screenSize(24.0) * 2;
          break;
        case 1: //android 手机
          width = flexibleWidth - screenSize(12.0) * 2;
          break;
        case 2: //android Pad竖屏
          width = flexibleWidth - screenSize(24.0) * 2;
          break;
        case 3: //android Pad横屏
          width = flexibleWidth - screenSize(12.0) * 2;
          break;
        case 4: //android 折叠屏
          width = flexibleWidth - screenSize(12.0) * 2;
          break;
      }
      var bgColor = "var(--current-fault-bg-color)";
      switch (this.styleType) {
        case 0:
          bgColor = "var(--current-fault-bg-color)";
          break;
        case 1:
          bgColor = "var(--current-warn-bg-color)";
          break;
      }
      return { width: width + "px", background: bgColor };
    },
    getFaultTipImg: function () {
      switch (this.styleType) {
        case 0:
          if (this.darkMode === "light") {
            return require("../../assets/img/light/ic_fault_tip.png");
          } else {
            return require("../../assets/img/dark/ic_fault_tip_dark.png");
          }
        case 1:
          if (this.darkMode === "light") {
            return require("../../assets/img/light/ic_warn_tip.png");
          } else {
            return require("../../assets/img/dark/ic_warn_tip_dark.png");
          }
      }
    },
    getFaultTipArrow: function () {
      if (this.darkMode === "light") {
        return require("../../assets/img/light/ic_fault_right_arrow.png");
      } else {
        return require("../../assets/img/dark/ic_fault_right_arrow_dark.png");
      }
    },
    //故障信息的文本内容
    getFaultMessage() {
      if (this.faultList.faultCode > 0) {
        //故障优先显示
        return (
          this.faultList.faults[this.faultList.faultCode].title +
          this.helpMessage
        );
      } else if (this.faultList.warnCode > 0) {
        //告警类次之
        return (
          this.faultList.warns[this.faultList.warnCode].title + this.helpMessage
        );
      } else if (this.faultList.remindCode > 0) {
        //提醒类再次之
        return this.faultList.reminds[this.faultList.remindCode].title;
      } else {
        return this.alertMessage + this.helpMessage;
      }
    },
    //故障条是否可见
    isViewVisible() {
      return (
        this.faultList.faultCode > 0 ||
        this.faultList.warnCode > 0 ||
        this.faultList.remindCode > 0
      );
    },
    //获取发生的故障对象
    getFault() {
      if (this.faultList.faultCode > 0) {
        return this.faultList.faults[this.faultList.faultCode];
      } else if (this.faultList.warnCode > 0) {
        return this.faultList.warns[this.faultList.warnCode];
      } else if (this.faultList.remindCode > 0) {
        return this.faultList.reminds[this.faultList.remindCode];
      } else {
        return this.faultList.warns[this.faultList.warnCode];
      }
    },
  },

  methods: {
    gotoFaultPage() {
      if (this.clickable) {
        //向下一个页面传递参数
        this.$router.push({
          path: "/fault",
          query: {
            fault: this.getFault,
          },
        });
      }
    },
  },
};
</script>
<style scoped>
.faultViewContainer {
  height: 48px;
  background-color: var(--current-background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faultViewContainer .faultViewAlertContainer {
  width: 100%;
  height: 100%;
  background-color: var(--current-fault-bg-color);
  flex-direction: row;
  align-items: center;
  display: flex;
  border-radius: 16px;
  /* background: #ff0000; */
}
.faultViewContainer .faultViewAlertContainer .faultAlertText {
  margin-left: 16px;
  color: var(--current-fault-title-color);
  font-size: 16px;
  flex: 1;
}

.faultViewContainer .faultViewAlertContainer .faultAlertLeft {
  margin-left: 12px;
  height: 24px;
  width: 24px;
}

.faultViewContainer .faultViewAlertContainer .faultAlertRight {
  margin-right: 14px;
  height: 24px;
  width: 12px;
}
</style>
